<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>
<style>
    .bgk1 {
        background-color: #20A8D8 !important;
        color: #FFFFFF !important;
    }

    .bgk2 {
        background-color: #63C2DE !important;
        color: #FFFFFF !important;
    }

    .bgk3 {
        background-color: #F8CB00 !important;
        color: #FFFFFF !important;
    }

    .bgk4 {
        background-color: #F86C6B !important;
        color: #FFFFFF !important;
    }

    .text-success {
        color: #FFFFFF !important;
    }

    .label-primary {
        background-color: #428CC9 !important;
    }

    .label-info {
        background-color: #5CBFDF !important;
    }

    .fa1 {
        color: #20A8D8 !important;
    }

    .fa2 {
        color: #F86C6B !important;
    }

    .fa3 {
        color: #F8CB00 !important;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">

    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <!--<div class="ibox-title">-->
                <!--<span class="label label-success pull-right">月</span>-->
                <!--<h5>在职员工数</h5>-->
                <!--</div>-->
                <div class="ibox-content bgk1">
                    <span class="label label-info pull-right">月</span>
                    <h5>在职员工数</h5>
                    <h1 class="no-margins"><label th:text="${empCount}"></label></h1>
                    <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                    </div>
                    <small>总收入</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <!--<div class="ibox-title">-->
                <!--<span class="label label-info pull-right">全年</span>-->
                <!--<h5>公司数量</h5>-->
                <!--</div>-->
                <div class="ibox-content bgk2">
                    <span class="label label-primary pull-right">全年</span>
                    <h5>公司数量</h5>
                    <h1 class="no-margins"><label th:text="${compCount}"></h1>
                    <div class="stat-percent font-bold text-success">20% <i class="fa fa-level-up"></i>
                    </div>
                    <small>新订单</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <!--<div class="ibox-title">-->
                <!--<span class="label label-primary pull-right">今天</span>-->
                <!--<h5>访客</h5>-->
                <!--</div>-->
                <div class="ibox-content bgk3">
                    <span class="label label-warning pull-right">今天</span>
                    <h5>访客</h5>
                    <h1 class="no-margins"><label>106,120</label></h1>
                    <div class="stat-percent font-bold text-success">44% <i class="fa fa-level-up"></i>
                    </div>
                    <small>新访客</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <!--<div class="ibox-title">-->
                <!--<span class="label label-danger pull-right">最近一个月</span>-->
                <!--<h5>活跃用户</h5>-->
                <!--</div>-->
                <div class="ibox-content bgk4">
                    <span class="label label-danger pull-right">最近一个月</span>
                    <h5>活跃用户</h5>
                    <h1 class="no-margins"><label>80,600</label></h1>
                    <div class="stat-percent font-bold text-success">38% <i class="fa fa-level-down"></i>
                    </div>
                    <small>12月</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>订单</h5>
                    <div class="pull-right">
                        <!--<select id="year" onchange="Initialization(this.options[this.options.selectedIndex].value)">-->
                        <!--<select id="year">-->
                        <!--<option value="2001">2001</option>-->
                        <!--<option value="2002">2002</option>-->
                        <!--<option value="2003">2003</option>-->
                        <!--<option value="2004">2004</option>-->
                        <!--<option value="2005">2005</option>-->
                        <!--<option value="2006">2006</option>-->
                        <!--<option value="2007">2007</option>-->
                        <!--<option value="2008">2008</option>-->
                        <!--<option value="2009">2009</option>-->
                        <!--<option value="2010">2010</option>-->
                        <!--<option value="2011">2011</option>-->
                        <!--<option value="2012">2012</option>-->
                        <!--<option value="2013">2013</option>-->
                        <!--<option value="2014">2014</option>-->
                        <!--<option value="2015">2015</option>-->
                        <!--<option value="2016">2016</option>-->
                        <!--<option value="2017">2017</option>-->
                        <!--<option value="2018">2018</option>-->
                        <!--<option value="2019">2019</option>-->
                        <!--</select>年-->
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-9">
                            <div class="flot-chart">
                                <div class="echarts" id="mychart"></div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <ul class="stat-list">
                                <li>
                                    <h2 class="no-margins">2,346</h2>
                                    <small>订单总数</small>
                                    <div class="stat-percent">48% <i class="fa fa-level-up text-navy fa1"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 48%;" class="progress-bar bgk1"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">4,422</h2>
                                    <small>最近一个月订单</small>
                                    <div class="stat-percent">60% <i class="fa fa-level-down text-navy fa2"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 60%;" class="progress-bar bgk4"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">9,180</h2>
                                    <small>最近一个月销售额</small>
                                    <div class="stat-percent">22% <i class="fa fa-bolt text-navy fa3"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 22%;" class="progress-bar bgk3"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>用户项目列表</h5>

                </div>
                <div class="ibox-content">
                    <table class="table table-hover  table-bordered">
                        <thead>
                        <tr>
                            <th>状态</th>
                            <th>日期</th>
                            <th>用户</th>
                            <th>值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <span class="label label-warning">进行中...</span>
                            </td>
                            <td><i class="fa fa-clock-o"></i> 11:20</td>
                            <td>测试1</td>
                            <td class="text-navy"><i class="fa fa-level-up"></i> 24%</td>
                        </tr>
                        <tr>
                            <td><span class="label label-danger">已取消</span>
                            </td>
                            <td><i class="fa fa-clock-o"></i> 10:40</td>
                            <td>测试2</td>
                            <td class="text-navy"><i class="fa fa-level-up"></i> 66%</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="label label-warning">进行中...</span>
                            </td>
                            <td><i class="fa fa-clock-o"></i> 01:30</td>
                            <td>测试3</td>
                            <td class="text-navy"><i class="fa fa-level-up"></i> 54%</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="label label-warning">进行中...</span>
                            </td>
                            <td><i class="fa fa-clock-o"></i> 02:20</td>
                            <td>测试4</td>
                            <td class="text-navy"><i class="fa fa-level-up"></i> 12%</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="label label-warning">进行中...</span>
                            </td>
                            <td><i class="fa fa-clock-o"></i> 09:40</td>
                            <td>测试5</td>
                            <td class="text-navy"><i class="fa fa-level-up"></i> 22%</td>
                        </tr>
                        <tr>
                            <td><span class="label label-primary">已完成</span>
                            </td>
                            <td><i class="fa fa-clock-o"></i> 04:10</td>
                            <td>测试6</td>
                            <td class="text-navy"><i class="fa fa-level-up"></i> 66%</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="label label-warning">进行中...</span>
                            </td>
                            <td><i class="fa fa-clock-o"></i> 12:08</td>
                            <td>测试7</td>
                            <td class="text-navy"><i class="fa fa-level-up"></i> 23%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: sparkline-js"/>
<script type="text/javascript">
    var barChart = echarts.init(document.getElementById("mychart"));
    option = {
        grid: {
            y: 15,
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [520, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            itemStyle: {
                normal: {
                    color: '#FF7F50'
                }
            }
        }]
    };
    barChart.setOption(option);
    setTimeout(function () {
        window.onresize = function () {
            barChart.resize();
        }
    }, 200)

    $(document).ready(function () {
        /*
        var baroption = {
            title: {
                text: '员工入职数量月度统计表'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['入职人数']
            },
            grid: {
                x: 30,
                x2: 40,
                y2: 24
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '入职人数',
                    type: 'bar',
                    data: [],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        barChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
        barChart.setOption(baroption);
        window.onresize = barChart.resize;
        Initialization();
        */
    });


    // function Initialization(year) {
    //     if (year == 'undefined' || year == null) {
    //         var myDate = new Date();
    //         GetData(myDate.getFullYear());
    //     } else {
    //         GetData(year);
    //     }
    // }

    function GetData(year) {
        var nums = [];
        $.ajax({
            async: false,
            url: "/jinpeng/findEcData",
            data: {
                "year": year
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                if (data) {
                    for (var i = 0; i < data.length; i++) {
                        nums.push(data[i]);
                    }
                    barChart.hideLoading(); //隐藏加载动画
                    barChart.setOption({ //加载数据图表
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '人员数量',
                            data: nums
                        }]
                    });
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {

                alert("错误,请联系管理员,错误信息:" + textStatus);
            }
        });
    }
</script>
</body>
</html>
